<template>
    <!-- 正常竖版 -->
    <foreignObject :width="props.width" :height="props.height">

        <body xmlns="http://www.w3.org/1999/xhtml" style="margin: 0">
            <div>
                <div :style="itemData.nodeStyle"
                    :class="choice.paneNode.indexOf(itemData.id) !== -1 ? 'pane-node-content selected' : 'pane-node-content'">

                    <el-icon @dblclick.stop="$emit('nodesPersonalEvent', 'dbClickNodeIcon', i)"
                        :style="itemData.iconStyle" class="icon icon-data">
                        <component :is="getIcon(itemData.iconClassName || 'coin')" />
                    </el-icon>
                    <label>
                        <input type="text" class="name" v-model="itemData.t" @change="$emit('changeNodeName', itemData)"
                            style="font-size: 16px;text-align: center">
                    </label>
                </div>
                <div :class="currentEvent === 'dragLink' ? 'pane-node-parent-hl' : 'pane-node-parent'">
                    <div v-for="(_poi, nth) in itemData.in_ports" :key="'__' + nth" v-show="current !== i"
                        :style="{ width: `${100 / (itemData.in_ports.length + 1)}%` }">
                        <span class="space" @mouseup="$emit('linkEnd', i, nth)" />
                    </div>
                </div>
                <div class="pane-node-children">
                    <div v-for="(_poi, nth) in itemData.out_ports" :key="'___' + nth"
                        :style="{ width: `${100 / (itemData.out_ports.length + 1)}%` }">
                        <span class="space" @mousedown="mouseDown($event, i, nth)" />
                    </div>
                </div>
            </div>
        </body>
    </foreignObject>
</template>
<script setup>
import { getIcon } from "@/utils/tools"

const emits = defineEmits(["linkPre", "linkEnd", "nodesPersonalEvent", "changeNodeName"])
let current = $ref(-1)

const props = defineProps({
    item: {
        type: Object,
        default: () => {
        }
    },
    choice: {
        type: Object,
        default: () => {
        }
    },
    currentEvent: {
        type: String,
        default: () => ''
    },
    i: {
        type: Number,
        default: () => 0
    },
    width: {
        type: Number,
        default: () => 250
    },
    height: {
        type: Number,
        default: () => 34
    }
})

const itemData = $computed(() => {
    return { t: props.item.name + '-' + props.item.taskType, ...props.item }
})

const mouseDown = (e, i, nth) => {
    current = i
    emits('linkPre', e, i, nth)
    addEventListener("mouseup", resetCurrent)
}

const resetCurrent = () => {
    current = -1
    removeEventListener("mouseup", resetCurrent)
}
</script>

<style scoped>
foreignObject {
    overflow: visible;
}

.pane-node-content {
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    background-color: hsla(0, 0%, 100%, 0.9);
    border: 1px solid #289de9;
    border-radius: 20px;
    font-size: 12px;
    -webkit-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

.pane-node-content .icon {
    width: 30px;
    height: 30px;
    margin: 1px;
    border-radius: 100%;
    float: left;
    color: #fff;
    font-size: 26px;
    background-color: #289de9;
}

.pane-node-content .parentLink {
    font-size: 0;
    height: 12px;
    width: 12px;
    position: absolute;
    top: 0;
    left: 90px;
    transform: translateX(-50%);
    border-top: 6px solid black;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.pane-node-content .childLink {
    height: 10px;
    width: 10px;
    position: absolute;
    bottom: 0;
    left: 90px;
    transform: translate(-50%, 50%);
    border-radius: 50%;
    background: #ffffff;
    cursor: crosshair;
}

.pane-node-content .name {
    float: left;
    margin-left: 2px;
    width: calc(100% - 38px);
    line-height: 31px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    height: 30px;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: inherit;
}

.pane-node-parent-hl {
    position: fixed;
    top: -5px;
    height: 10px;
    width: 100%;
    display: flex;
    transform: translateX(6px);
}

.pane-node-parent-hl .space {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid gray;
    background: #ffffff;
    position: absolute;
    right: 0;
    top: 0;
    cursor: crosshair;
}

.pane-node-parent-hl .space:hover {
    box-shadow: 0 0 0 6px #3ddd73;
}

.paneSuccess {
    background: #3ddd73 !important;
}

.pane-node-parent-hl>div {
    position: relative;
    display: inline-block;
}

#parent-cross {
    top: 0px;
    height: 100%;
    width: 10px;
    left: -10px;
}

#parent-cross .space {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

#children-cross {
    top: 0px;
    right: 0;
    height: 100%;
    width: 10px;
    position: fixed;
}

#children-cross .space {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.node-pop {
    position: absolute;
    left: 100px;
    top: -100px;
    border: 1px solid #ccc;
    padding: 10px 20px;
    border-radius: 30px 20px;
    background: #fff;
    pointer-events: none;
}

.node-pop:after {
    content: '.';
    font-size: 0;
    height: 20px;
    width: 20px;
    background: #fff;
    border: 2px #ccc solid;
    border-top: none;
    border-right: none;
    z-index: 100;
    position: absolute;
    transform: rotate(-34deg) skew(-33deg, -1deg) scale(1.5);
    border-radius: 20px 0 0 0;
    left: -14px;
    top: 22px;
    pointer-events: none;
}

.pane-node-parent {
    position: fixed;
    top: 0;
    height: 0;
    width: 100%;
    display: flex;
    opacity: 0;
    display: none;
    transform: translateX(6px);
}

.pane-node-parent .space {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid gray;
    background: #ffffff;
    position: absolute;
    right: 0;
    top: 0;
}

.pane-node-parent>div {
    position: relative;
    display: inline-block;
}

.pane-node-children {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    opacity: 0;
    transform: translateX(6px);
}

.pane-node-children .space {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid gray;
    background: #ffffff;
    position: absolute;
    right: 0px;
    bottom: -6px;
    cursor: crosshair;
}

.pane-node-children .space {
    background: #cccccc;
}

.pane-node-children:hover {
    opacity: 1;
}

.pane-node-children>div {
    position: relative;
    display: inline-block;
}

.selected {
    background: rgba(227, 244, 255, 0.9) !important;
}
</style>
